<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>购物车</h1>
    <!-- 
        input:checkbox
        click
        input
        v-model
        change
     -->
    <input type="checkbox" v-model="status"  @change="chooseCartsFn" /> 全选&全不选 ({{status}})
    <hr />
    <ul>
        <!-- <li v-for="item in carts"> -->
        <li v-for="(item,i) in carts">
            <input type="checkbox" :value="item"  v-model="chooseCarts" @change="chooseCartFn" /> &nbsp;
            标题：{{item.title}}，
            价格：{{item.price}}， 
            数量：{{item.number}}&nbsp;
            <!-- 
            input:text
            click
            v-model
            input
            change
             -->
            <input type="text" size="1" v-model="item.number" @input="filterCartNumberFn(i)" />
            <input type="button" value="+" @click="addCartNumberFn(i)" />
        </li>
    </ul>
    <hr /><hr />
    <h2>勾选商品</h2>
    {{chooseCarts}}
    <h2>总数量： {{totalNum}}，总价：{{totalPrice}}</h2>
</div>
<script>
// 准 备：复制下述【初始化代码】完成需求

// 需求1：遍历显示carts模型数据（注：遍历li标签）
// 需求2：购买数量input框改变同步模型（注：双向绑定即可）
// 需求3：调用filterCartNumberFn方法过滤数据，仅支持数字（留心：keyup、input）
// 需求4：单击商品添加按钮，调用addCartNumberFn方法，模型carts对应数据 + 1
// 需求5：单击商品复选框，同步数据到chooseCarts模型中（注：数组
// 需求6：全选 & 全不选、封装chooseCartsFn方法切换状态
// 需求7：勾选统计，显示总价格总数量（封装totalFn方法，遍历计算已勾选商品总数量和价格分别保存到模型		totalNum & totalPrice）
const vm = new Vue({
    el: '#app',
    data: {
        //购物车商品
        carts: [
            {title:'商品1', price: 1, number: 1},
            {title:'商品2', price: 2, number: 1},
            {title:'商品3', price: 3, number: 1}
        ],
        status:false, 
        chooseCarts: [ ],

        totalNum: 0,
        totalPrice: 0
    },
    //声明普通方法
    methods: {
        totalFn() {
            // 定义临时变量存放总价、总数量  temp临时 tmp
            let tmpTotalNum = 0
            let tmpTotalPrice = 0
            // 遍历勾选的商品累计
            this.chooseCarts.forEach(item => {
                tmpTotalNum += parseInt(item.number)
                tmpTotalPrice += parseInt(item.number)*parseFloat(item.price)
            })
            // 遍历结束保存到模型中显示，而不是结果dom操作显示
            this.totalNum = tmpTotalNum
            this.totalPrice = tmpTotalPrice
        },
        chooseCartFn() {
            // 1 同步全选全不选
            this.status = this.carts.length === this.chooseCarts.length

            // 2 统计
            this.totalFn()
        },
        chooseCartsFn() {
            this.chooseCarts = this.status ? this.carts : []
            this.totalFn()
        },
        addCartNumberFn(i) {
            this.carts[i].number++
            this.totalFn()
        },
        filterCartNumberFn(i) {
            // 1 获取最新数据
            let number = this.carts[i].number
            console.log('最新数据：', number);
            // 2 正则过滤移除非数组   字符串.replace(旧数据, 新数据)
            number = String(number).replace(/\D/g, '')
            // 3 重置页面显示
            this.carts[i].number = number
            this.totalFn()
        }
    }
})
</script>
</body>
</html>